<%@ page import="com.zzn.bookManage.pojo.ResultEntity" %>
<%@ page import="com.zzn.bookManage.pojo.Book" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="loginUser" class="com.zzn.bookManage.pojo.User" scope="session"/>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>首页</title>
  <%@ include file="head.jsp" %>
</head>
<body>

<%!
  ResultEntity<Book> result;
  List<Book> books;
  String msg;
%>
<%
  request.setCharacterEncoding("UTF-8");
  msg = (String) request.getAttribute("msg");
  result = (ResultEntity<Book>) request.getAttribute("result");
  result = result!=null? result :new ResultEntity<>();
  books = result.hasData()?result.getData():new ArrayList<>();
%>

<div id="app">
  <div class="container">
    <div class="row primary-bg align-items-center">
      <div class="col-3">
        <img src="./assets/logo.png" class="m-auto card-img-top" alt="logo" style="width: 80px">
      </div>
      <div class="col-auto ml-auto">
        <span>Hello! <strong><%=loginUser.getNickname()%></strong></span>
        <form action="${pageContext.request.contextPath}/userLogout" method="post" style="display: inline">
          <button type="submit" class="btn btn-sm btn-info ml-4">退出登录</button>
        </form>
      </div>
    </div>
    <div class="row">
      <!--      侧边栏-->
      <div class="col-md-2 col-sm-1 secondary-bg px-0" style="height: 800px">
        <div class="btn-group-vertical full-width" role="group" aria-label="Basic example">
          <button type="button" class="btn  full-width btn-my-primary" autofocus>首页</button>
          <a href="${pageContext.request.contextPath}/setting.jsp" class="full-width">
            <button type="button" class="btn btn-my-primary full-width">用户设置</button>
          </a>
        </div>
      </div>
      <!--      内容部分-->
      <div class="col-md-10 col-sm-11 bg-white" style="overflow: auto">
        <div class="row mt-2">

          <%
            if (msg!=null && !"".equals(msg)){
          %>
          <div class="alert alert-danger alert-dismissible fade show full-width mx-2" role="alert">
            <span><%=msg%></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <%
            }
          %>

          <div class="col-12">
            <table class="table table-striped">
              <thead>
              <tr>
                <th scope="col" class="text-center">#</th>
                <th scope="col" class="text-center">书名</th>
                <th scope="col" class="text-center">作者</th>
                <th scope="col" class="text-center">出版社</th>
                <th scope="col" class="text-center">存放位置</th>
                <th scope="col" class="text-center">到期时间</th>
                <th scope="col" class="text-center">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="item in books">
                <th class="text-center" scope="row">{{item.seq}}</th>
                <td class="text-center">{{item.name}}</td>
                <td class="text-center">{{item.author}}</td>
                <td class="text-center">{{item.publisher}}</td>
                <td class="text-center">{{item.position}}</td>
                <td class="text-center">{{myDateFormat(item.expireTime)}}</td>
                <td class="text-center">
                  <button type="button" @click="returnBook(item)" class="btn btn-sm btn-info" data-toggle="modal"
                          data-target="#confirmDelete">归还
                  </button>
                  <button type="button" @click="showBookDetail(item)" class="btn btn-sm btn-my-primary"
                          data-toggle="modal" data-target="#bookInfo">详情
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--    归还弹窗-->
    <div class="modal fade" id="confirmDelete" tabindex="-1" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="confirmDeleteLabel">确认归还吗？</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            确认归还 《{{ currentBookName }}》 吗？
          </div>
          <div class="modal-footer">
            <form action="${pageContext.request.contextPath}/returnBook" method="post">
              <input type="text" class="d-none" name="bid" :value="bid">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
              <button type="submit" class="btn btn-primary">归还</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--    详情弹窗-->
    <div class="modal fade" id="bookInfo" tabindex="-1" aria-labelledby="bookInfoLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="bookInfoLabel">图书详情</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-2">
                书名：
              </div>
              <div class="col-4">
                {{bookDetail.name}}
              </div>
              <div class="col-2">
                作者：
              </div>
              <div class="col-4">
                {{bookDetail.author}}
              </div>

              <hr class="my-1 full-width">

              <div class="col-2">
                出版社：
              </div>
              <div class="col-4">
                {{bookDetail.publisher}}
              </div>
              <div class="col-2">
                参考价格：
              </div>
              <div class="col-4">
                {{bookDetail.price}}
              </div>

              <hr class="my-1 full-width">

              <div class="col-2">
                存放位置：
              </div>
              <div class="col-10">
                {{bookDetail.position}}
              </div>

              <hr class="my-1 full-width">

              <div class="col-2">
                简介：
              </div>
              <div class="col-10">
                {{bookDetail.description}}
              </div>

              <hr class="my-1 full-width">

              <div class="col-2">
                创建时间：
              </div>
              <div class="col-10">
                {{myDateFormat(bookDetail.createTime)}}
              </div>

              <hr class="my-1 full-width">

              <div class="col-2">
                到期时间：
              </div>
              <div class="col-10">
                {{myDateFormat(bookDetail.expireTime)}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            content: '',
            currentBookName: '',
            bid: '',
            books: [
                <%
                   for(int i = 0; i < books.size(); i++) {
                     int seq = result.getCount()-(result.getPage()-1)*result.getRow() - i;
                     Book b = books.get(i);
                 %>
                {
                    seq: '<%=seq%>',
                    bid: '<%=b.getBid()%>',
                    name: '<%=b.getName()%>',
                    author: '<%=b.getAuthor()%>',
                    publisher: '<%=b.getPublisher()%>',
                    position: '<%=b.getPosition()%>',
                    description: '<%=b.getDescription()%>',
                    price: '￥<%=b.getPrice()%>',
                    expireTime: '<%=b.getExpireTime()%>',
                    borrowBy: '<%=b.getBorrowBy()!=null?b.getBorrowBy().getNickname():""%>',
                    createTime: '<%=b.getCreateTime()%>',
                },

                <%
                  }
                %>
            ],
            bookDetail: {},
        },
        methods: {
            myDateFormat(dateStr='') {
                let str = dateStr.split('.')[0].split(' ')
                let now = new Date();
                let ii = new Date(dateStr);
                if (now.getDate() === ii.getDate()) {
                    return '今天 ' + str[1]
                } else if (now.getDate() === ii.getDate() - 1) {
                    return '昨天 ' + str[1]
                } else {
                    return dateStr.split('.')[0]
                }
            },
            returnBook: function (item) {
                this.currentBookName = item.name
                this.bid = item.bid
            },
            showBookDetail: function (item) {
                this.bookDetail = item
            }
        },
        computed: {
            contentLength: function () {
                return this.content.length
            }
        },
    })
</script>
</body>
</html>
